<template>
  <div>
    <div class="detail box-flex">
      <div class="poster">
        <img :src="item.img | formatImg('110.150')" />
      </div>
      <div class="content flex">
        <div class="title middle line-ellipsis">{{item.nm}}</div>
        <div class="title-en-name line-ellipsis">Interstellar</div>
        <div class="score line-ellipsis">
          {{item.sc}}
          <span class="snum">(40.9万人评)</span>
        </div>
        <div class="type line-ellipsis">
          <span>剧情,科幻,冒险</span>
          <img
            style="width: 26px;"
            class="imax"
            src="//p0.meituan.net/scarlett/db26de7a31199508d536e7c2cd1203d7728.png"
          />
        </div>
        <div class="src line-ellipsis">美国,英国,加拿大,冰岛/169分钟</div>
        <div class="pubDesc line-ellipsis">{{item.showInfo}}</div>
      </div>
    </div>
    <div class="days">
        <ul :style="{left:toleft+'px'}">  
            <li v-for="(d,index) in showDays.dates" @click="handleClick(index,$event)" :key="index">{{d.date}}</li>
        </ul>
    </div>
    
  </div>
</template>

<script>
import { post } from "@/api/http";
export default {
    data(){
    return{
        cinemas:[],
        showDays:{
            dates:[]
        },
        toleft:0
    }
    },
  computed: {
    item() {
      return this.$route.params;
    },
  },
  async created() {
   let rs=await post("/ajax/movie", {
      movieId: 342485,
      day: "2020-07-31",
      offset: 0,
      limit: 20,
      districtId: -1,
      lineId: -1,
      hallType: -1,
      brandId: -1,
      serviceId: -1,
      areaId: -1,
      stationId: -1,
      item: "",
      updateShowDay: true,
      reqId: 1596160976394,
      cityId: 10,
    })
    console.log(rs);
    this.cinemas=rs.data.cinemas;
    this.showDays=rs.data.showDays;
  },
  methods:{
      handleClick(index,event){
        //   当前x座标值
          let currentX=event.pageX;
          let width =event.target.getBoundingClientRect().width;
          if(currentX<width && index){
             this.toleft+=width;
            //  当前的坐标值在页面的最后一个（3个），并且确保后面还有值
          }else if(currentX>2*width && index<this.showDays.dates.length-1){
              this.toleft-=width;
          }
      }
  }
};
</script>

<style lang="scss" scoped>
.days{
    overflow: hidden;
    padding: 10px;
    position: relative;
    ul{
        white-space: nowrap;
        position: absolute;
        left: 0px;
        bottom: 0px;
        transition: all 400ms;
        li{
            width: 120px;
            display: inline-block;

        }
    }
}
.detail {
  display: flex;
  padding: 19px 30px 19px 15px;
  height: 188px;
  background-color: #000;
  .content {
    margin-left: 12px;
    .middle {
      margin-top: 8px;
      font-size: 20px;
      color: white;
    }
    .title-en-name {
      color: white;
      font-size: 12px;
    }
  }
  .score {
    margin-top: 6px;
    font-size: 18px;
    color: #ffcc00;
    .snum {
      font-size: 12px;
      color: #fff;
    }
  }
  .type {
    margin-top: 6px;
    span {
      font-size: 12px;
      color: #fff;
    }
    img {
        width: 30px;      height: 16px;
      margin: 4px 0px 0px 4px;
      background-color: rgba(158, 153, 153,0.2);
    }
  }
  .src {
    font-size: 12px;
    color: white;
    margin-top: 10px;
  }
  .pubDesc {
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
  }
}
</style>